<!-- 新增编辑弹窗 -->
<template>
  <t-dialog
    v-model:visible="formVisible"
    :width="680"
    :footer="false"
    :on-close="onClickCloseBtn"
    class="dialog-form"
  >
    <!-- 对话框头部 -->
    <template #header>
      <div class="dialog-header">
        <span class="dialog-title">{{ title }}用户</span>
        <span class="information"></span>
      </div>
    </template>
    <template #body>
      <!-- 表单内容 -->
      <t-form
        ref="form"
        :data="formData"
        :rules="rules"
        :label-width="110"
        on-cancel="onClickCloseBtn"
        :reset-type="resetType"
        @submit="onSubmit"
      >
        <t-form-item label="用户账号：" name="username" style="width: 90%">
          <t-input
            v-model="formData.username"
            class="wt-400"
            placeholder="请输入用于登录的账号"
            clearable
          >
          </t-input>
        </t-form-item>
        <t-form-item label="用户昵称：" name="name" style="width: 90%">
          <t-input
            v-model="formData.name"
            class="wt-400"
            placeholder="请输入"
            clearable
          >
          </t-input>
        </t-form-item>
        <t-form-item label="外部管理员ID：" name="externalAdminId" style="width: 90%">
          <t-input
            v-model="formData.externalAdminId"
            class="wt-400"
            placeholder="请输入"
            clearable
          >
          </t-input>
        </t-form-item>
        <t-form-item label="使用状态：" name="status" style="width: 90%">
          <t-radio-group default-value="1" v-model="formData.status">
            <t-radio :value="0">停用</t-radio>
            <t-radio :value="1">正常</t-radio>
          </t-radio-group>
        </t-form-item>
        <t-form-item label="备注：" name="note" style="width: 90%">
          <t-textarea
            v-model="formData.note"
            class="wt-400"
            placeholder="请输入内容"
            clearable
          >
          </t-textarea>
        </t-form-item>
        <div style="margin-top: 30px; float: right">
          <button class="bt bt-grey btn-submit" @click="onClickCloseBtn">
            <span>取消</span>
          </button>
          <button theme="primary" type="submit" class="bt btn-submit">
            <span>确定</span>
          </button>
        </div>
      </t-form>
      <!-- end -->
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { MessagePlugin, ValidateResultContext } from 'tdesign-vue-next'
import { validateText, validateText10, validateText232 } from "@/utils/validate";
import { saveApplication } from '@/api/application'
import { saveSystemUser } from "@/api/systemuser";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
  title: {
    type: String,
    default: '新建产品'
  }
})
const resetType = ref('empty')
const emit: Function = defineEmits(['handleClose', 'fetchData'])
const formVisible = ref(false)
const formData = ref({
  status: 1,
  name: '',
  username: '',
  externalAdminId: '',
  note: ''
})

const title = ref()
const form = ref()
const onSubmit = async (result: ValidateResultContext<FormData>) => {
  if (result.validateResult === true) {
    const params = {
      id: 'SYSTEM_USER_ADD_OR_UPDATE',
      palyload: {
        ...formData.value
      }
    }
    const res: any = await saveSystemUser(params) // 获取列表数据,当前为mock接口，后续会替换为真实接口，并接受真实数据传值
    if (res.success) {
      MessagePlugin.success('提交成功')
      emit('fetchData')
      onClickCloseBtn()
    } else {
      MessagePlugin.error(res.errorMessage)
    }
  }
}
// 关闭弹框
const onClickCloseBtn = () => {
  // 重置表单
  form.value.reset()
  formVisible.value = false
  emit('handleClose')
}
// 点击叉号关闭
// 监听器，监听props.visible的变化，控制弹框的显示隐藏
watch(
  () => props.visible,
  () => {
    formVisible.value = props.visible
    title.value = props.title
  }
)
// 监听器，给表单赋值
watch(
  () => props.data,
  (val) => {
    formData.value = JSON.parse(JSON.stringify(val))
  }
)

// 表单校验
const rules = {
  username: [
    {
      required: true,
      message: '请输入账户名',
      type: 'error',
      trigger: 'blur'
    },
    {
      validator: validateText232,
      message: '请输入至少5个字符,至多50个字符',
      type: 'error',
      trigger: 'change'
    }
  ]
}
</script>
<style lang="less" scoped>
.btn-submit {
  margin-left: 15.5px;
  width: 60px;
  float: left;
}

.nickname {
  margin-right: 2px;
  z-index: 100;
  color: var(--color-bk4);
}
:deep(.t-textarea__limit) {
  color: var(--color-bk4);
  right: 10px;
}
.information {
  margin-left: 10px;
  font-weight: 400;
  font-size: 14px;
  color: var(--color-bk4);
}
// 弹框出现方式
.dialog-form {
  .t-dialog__wrap {
    .t-dialog__position .t-dialog--top {
      background-color: #fff;
    }
  }
}
</style>
